// home页
<template>
  <div>
    <el-container>
      <!-- 头 -->
      <el-header class="homeHeader">
        <div class="title">消防管理后台</div>
        <el-dropdown class="userInfo" @command="commandHandler">
          <span class="el-dropdown-link">
            {{user.name}}
            <i>
              <img :src="user.userface" alt />
            </i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
            <el-dropdown-item command="setting">设置</el-dropdown-item>
            <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <!-- 侧边 -->
        <el-aside width="200px">
          <!-- 加入点击菜单的方法 -->
          <el-menu router>
            <el-submenu
              index="1"
              v-for="(item,index) in this.$router.options.routes"
              :key="index"
              v-if="!item.hidden"
            >
              <template slot="title" v-if="!item.hidden">
                <i class="el-icon-location"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group v-if="!item.hidden">
                <el-menu-item
                  :index="child.path"
                  v-for="(child,indexj) in item.children"
                  :key="indexj"
                >{{child.name}}</el-menu-item>
                <!-- <el-menu-item index="test2">选项2</el-menu-item> -->
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- 主显示页 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 这里的user,是登陆成功后,由login.vue方法里添加进sessionStorage里的
      user: JSON.parse(window.sessionStorage.getItem("user"))
    };
  },
  methods: {
    commandHandler(cmd) {
      if (cmd == "logout") {
        this.logout();
      }
    },

    //点击菜单的方法
    // menuClick(index) {
    //   // console.log(index,indexPath);
    //   this.$router.push(index);
    // },

    // 注销
    logout() {
      this.$confirm("是否确定进行注销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.getRequest("/logout");
          //删除session里的用户信息
          window.sessionStorage.removeItem("user");
          //跳转到登陆页面
          this.$router.replace("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销"
          });
        });
    }
  }
};
</script>

<style>
.homeHeader {
  background-color: rgb(54, 158, 199);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
  box-sizing: border-box;
}

.homeHeader .title {
  font-size: 30px;
  font-family: 方正姚体;
  color: beige;
}

.homeHeader .userInfo {
  cursor: pointer;
}

.el-dropdown-link img {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin-left: 9px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>